<template>
<div>
<el-row>
        <el-col :span="6"><div class="grid-content bg-purple">1</div></el-col>
        <el-col :span="6"><div class="grid-content bg-success">2</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">3</div></el-col>
        <el-col :span="6"><div class="grid-content bg-success">4</div></el-col>
      </el-row>
<el-time-select
  v-model="value1"
  :picker-options="{
      start:'08:30',
      step:'00:15',
      end:'18:30'
  }"
  placeholder="选择时间"
></el-time-select>

<el-date-picker
  v-model="valueDate"
  type="date"
  placeholder="选择日期">
</el-date-picker>
 
 <el-date-picker
 v-model="value2"
  type="datetime"
  placeholder="选择日期时间">
</el-date-picker>

<div class="flex-box">
      <h2>各种button</h2>
      <el-row class="flex1 margin-left10">
        <el-col :span="3"><el-button>默认按钮</el-button></el-col>
        <el-col :span="3"><el-button type="primary">主要按钮</el-button></el-col>
        <el-col :span="3"><el-button type="success">成功按钮</el-button></el-col>
        <el-col :span="3"><el-button type="warning">警告按钮</el-button></el-col>
        <el-col :span="3"><el-button plain>默认按钮</el-button></el-col>
        <el-col :span="3"><el-button round>默认按钮</el-button></el-col>
      </el-row>
    </div>
</div>

</template>
<script>
export default {
     data() {
      return {
        value1: '',
         valueDate: '',
          value2: ''
      };
      
    },
    // 接口调用方法一
      mounted(){
           //get或者post , api为接口地址
           this.$axios.get('api',{
                 params:{  //post不需要params:这部分
                       //请求参数
                 }
           }).then(res => {  //res是返回结果
               //你的下一步操作 例:
                this.info = res.data  //存数据
           }).catch(err => { //请求失败就会捕获报错信息
                 //err.response可拿到服务器返回的报错数据       
           })
      }, 
      // 接口调用方法二
       mounted(){
           //get或者post , api为接口地址
           this.$axios({
               method:'post',
               url:'api',
               data:{  //get这里应为params
                  //请求参数
               },
               //withCredentials:true, //局部携带cookie
               headers:{} //如果需要添加请求头可在这写
           }).then(res => {  //res是返回结果
               //你的下一步操作 例:
                this.info = res.data  //存数据
           }).catch(err => { //请求失败就会捕获报错信息
                 //err.response可拿到服务器返回的报错数据       
           })
      } 
}
</script>
